<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
			margin:0;
			padding:0;
		}
		.content{
			width:800px;
			margin:50px auto;
		}
		.title{
			font-size:18px;
			font-weight:bold;
			padding-left:340px;
			margin-bottom:30px;
		}
		input{
			border:1px solid #a9a9a9;
			height:34px;
			line-height:34px;
			width:550px;
			margin-bottom:20px;
			padding-left:5px;
		}
		label{
			width:120px;
			text-align:right;
			display:inline-block;
		}
		#registerBtn{
			background:#3498db;
			color:#fff;
			font-size:14px;
			text-align:center;
			width:100px;
			line-height:34px;
			border:none 0;
			cursor:pointer;
			margin:20px 20px 0 0;
			margin-left:120px;
		}
		label span{
			color:red;
		}
		#errContent{
			padding:20px 0 0 30px;
			text-align:center;
		}

		</style>
	</head>
	<body>
		<div class="content">
		    <div class="title">用户注册</div>
		    <form onsubmit="return false">
		        <div><label><span>*</span>昵称：</label><input ="clearerr()"="" id="name" type="text" placeholder="只能包含中文、英文、数字和下划线,长度6-12位"></div>
		        <div><label><span>*</span>手机：</label><input ="clearerr()"="" id="phone" type="text" placeholder=""></div>
		        <div><label>邮箱：</label><input ="clearerr()"="" id="email" type="text"></div>
		        <div><label>身份证号：</label><input ="clearerr()"="" id="cardCode" type="text"></div>
		        <div><button id="registerBtn" type="submit">注册</button></div>
		        <div id="errContent"></div>
		    </form>
		</div>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script>
			var oRegisterBtn = document.getElementById('registerBtn');
			var oName = document.getElementById('name');
			var oPhone = document.getElementById('phone');
			var oEmail = document.getElementById('email');
			var oCardCode = document.getElementById('cardCode');
			var oErrContent = document.getElementById('errContent');
			
			oRegisterBtn.onclick = function() {
			    var oRegister = true;
			    var err = "";
			    if (!oName.value) {
			        err += "用户名不能为空<br />";
			        oRegister = false;
			    } else if (!/^[\u4e00-\u9fa5]{2,6}$/.test(oName.value)) {
			        err += "用户名格式不对<br />";
			        oRegister = false;
			    }
			
			
			    if (!oPhone.value) {
			        err += "手机号码不能为空<br />";
			        oRegister = false;
			    } else if (!/^1[34578]\d{9}$/.test(oPhone.value)) {
			        err += "手机号格式不对<br />";
			        oRegister = false;
			    }
			
			
			    if (oEmail.value && !/^[a-zA-Z0-9]\w+@\w+\.(com|cn|edu)$/.test(oEmail.value)) {
			        err += "邮箱格式不对</br>";
			        oRegister = false;
			    }
			
			    if (oCardCode.value && !/^[1-9]\d{16}[0-9X]$/i.test(oCardCode.value)) {
			        err += "身份证号式不对</br>";
			        oRegister = false;
			    }
			
			
			    if (oRegister) {
			        alert("您的资料已提交...");
			    } else {
			        oErrContent.innerHTML = err;
			    }
			
			}
		</script>
	</body>
</html>
